<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>jquery源码解析视频76-1</title>
  <script src="../jquery-2.0.3.js"></script>
</head>

<body>
  <!-- 1、add方法 -->
  <!-- <div>div</div>
    <span>span</span> -->

  <!-- 2、end方法 -->
  <!-- <div>
      div
      <span>span</span>
    </div> -->

  <!-- 3、addBack方法的筛选功能 -->
  <!-- <div>div<span>span</span></div>
    <div class="box">div<span>span</span></div>
    <div>div<span>span</span></div>
    <div>div<span>span</span></div> -->

  <!-- 4、parent方法的使用 -->
  <!-- <div>div<p>p<span>span</span></p></div>
    <p>p<span>span</span></p> -->

  <!-- 5、next -->
  <div>
    <span>span</span>
    sssssssss
    <p>p</p>
  </div>

  <script>
    $(function () {
      // 1、给某个元素加边框，分别给两个元素附加属性
      // $("div").css("border","1px solid red");
      // $("span").css("border","1px solid red");
      // $("div,span").css("border","1px solid red");
      // 通过add方法
      // $("div").add("span").css("border","1px solid red");
      // $("div").add($("span")).css("border", "1px solid red");

      // 2、addBack和end方法一起使用
      // end 方法，作用回到栈的下一层
      // $("div").find("span").css("color", "red");
      // $("div").find("span").css("color", "red").end().css("border","1px solid red");
      // addBack方法，既可以回到栈的下一层，又可以把栈当前的元素和下一层元素同时进行后续的操作
      // addBack方法是add方法和end方法的结合体
      // $("div").find("span").css("color", "red").addBack().css("border","1px solid red");

      // 3、addBack方法的筛选功能
      // $("div").find("span").css("color","red").addBack(".box").css("border","1px solid red");

      // 4、parent方法指当前元素的父节点
      // $("span").parent().css("border","1px solid red");
      // parent()方法中还可以选择传一个参数
      // $("span").parent("div").css("border","1px solid red");

      // parents获取所有主线节点
      // $("span").parents().css("border","1px solid red");
      // parents("body")可以加筛选条件
      // $("span").parents("body").css("border","1px solid red");

      // parentsUntil截止某个节点止/截止的位置
      // $("span").parentsUntil("body").css("border","1px solid red");
      // parentsUntil也具有筛选功能
      // $("span").parentsUntil("body", "div").css("border","1px solid red");

      // $("span").parents().css("border","1px solid red");

      // 5、next方法使用
      $("span").next().css("border","1px solid red");



    });
  </script>
</body>

</html>